<template>
  <div>
    <el-card>
      <div slot="header" class="box">
        <span>三级菜单</span>
        <svg
          t="1639555795386"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1789"
          width="16"
          height="16"
        >
          <path
            d="M950.8 487.1c-33-48.7-202.8-291.7-295.3-291.7-35 0-66.4 27.9-96.7 55-14.6 13-39.1 34.8-47.9 34.8-10 0-36-22.8-51.6-36.5-29.6-25.9-60.1-52.7-92.4-52.7h-0.6C273.9 197.1 104.1 438.6 71 487c-5.1 7.5-5.8 17.2-1.8 25.4 1.6 3.3 39.9 80.7 112.7 158.9 97.9 105.2 211.7 160.8 329 160.8 55.6 0 110.4-12.3 162.8-36.5 12.5-5.8 18.1-20.7 12.3-33.3-5.8-12.6-20.6-18.1-33.1-12.4-45.9 21.2-93.7 31.9-142.1 31.9-220 0-358.5-222.6-390.1-278.9 87.5-125.4 203.5-256.1 245.9-256.6h0.1c13.6 0 40.2 23.3 59.6 40.3 28.6 25.1 55.7 48.8 84.4 48.8 27.7 0 53.5-23 81-47.4 21.2-18.9 47.6-42.4 63.7-42.4 42.3 0 158.2 131.2 245.5 257.2-16.5 29.6-62.4 105.3-134 170.1-10.3 9.3-11.1 25.2-1.9 35.5s25 11.2 35.2 1.9c98.2-88.9 150.1-193.6 152.2-198 4.2-8 3.5-17.7-1.6-25.2z m-158 37c5.7-12.7 0.1-27.5-12.5-33.3-0.3-0.1-25.4-11.6-43.2-21.7-74.6-42.3-130-19.3-170.5-2.5-17.9 7.4-33.3 13.8-46.8 13.8-14.1 0-26.9-6.4-43.2-14.4-35.8-17.8-85-42.1-170.5 3-18.1 9.6-45.9 21.3-46.2 21.4-12.7 5.4-18.7 20.1-13.4 32.9 4 9.6 13.3 15.4 23 15.4 3.2 0 6.5-0.6 9.6-1.9 1.2-0.5 30.1-12.7 50.1-23.3 63-33.3 91.9-19 125.3-2.4 19.5 9.6 39.6 19.6 65.2 19.6 23.5 0 45-9 65.9-17.6 37.8-15.7 73.4-30.5 126.9-0.2 19.7 11.1 46 23.1 47.1 23.7 12.9 5.8 27.6 0.2 33.2-12.5z"
            fill="#1afa29"
            p-id="1790"
          ></path>
        </svg>
      </div>
      <div>
        <Category :scene="scene" @getCategoryId="getCategoryId"></Category>
      </div>
    </el-card>
    <el-card style="margin: 20px 0px">
      <!-- 第一部分:展示SPU列表的地方 -->
      <div v-show="scene == 0">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addSpu"
          :disabled="!category3Id"
          >添加SPU</el-button
        >
        <el-table style="width: 100%; margin: 10px 0px" border :data="list">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="spuName" label="spu名称" width="width">
          </el-table-column>
          <el-table-column prop="description" label="spu描述" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <el-button
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加sku"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改spu"
                @click="updateSpu(row)"
              ></el-button>
              <el-button
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看当前spu的sku列表"
                @click="searchSkuList(row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                title="删除spu"
                @click="deleteSpu(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="getSpuList"
          style="text-align: center"
          :current-page="page"
          :page-sizes="[3, 5, 10]"
          :page-size="limit"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 第二部分:添加或者修改spu -->
      <spuForm v-show="scene == 1" @changeScene="changeScene" ref="spu" />
      <skuForm v-show="scene == 2" ref="sku" @changeScene="changeScene" />
    </el-card>
     <!-- 对话框 -->
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible" @close="close">
      <el-table :data="skuList" v-loading="loading">
        <el-table-column
          property="skuName"
          label="名称"
        ></el-table-column>
        <el-table-column
          property="price"
          label="价格"
        ></el-table-column>
        <el-table-column property="weight" label="重量"></el-table-column>
        <el-table-column label="默认图片">
             <template slot-scope="{row,$index}">
                 <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
             </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import spuForm from "./spuForm";
import skuForm from "./skuForm";
export default {
  name: "Spu",
  data() {
    return {
      //确保三级联动在SPU这里可以使用，但是以后用不用待定
      scene: 0,
      category1Id: "",
      category2Id: "",
      category3Id: "",
      //初始化参数
      page: 1,
      limit: 3,
      total: 0, //分页需要展示总条数
      list: [], //展示SPU列表的数据
      //控制对话框显示隐藏
      dialogTableVisible:false,
      //存储sku实例的属性
      skuList:[],
      loading:true,
    };
  },
  methods: {
    //三级联动自定义事件出发的回调
    getCategoryId({ categoryId, flag }) {
      switch (flag) {
        case 1:
          this.category1Id = categoryId;
          //清理二三级分类的id
          this.category2Id = "";
          this.category3Id = "";
          break;
        case 2:
          this.category2Id = categoryId;
          //清理三级分类的id
          this.category3Id = "";
          break;
        case 3:
          this.category3Id = categoryId;
          //获取SPU列表进行展示
          this.getSpuList();
          break;
      }
    },
    //获取SPU列表
    async getSpuList(pager = 1) {
      //修改当前页码，再次 发请求
      this.page = pager;
      const { page, limit, category3Id } = this;
      try {
        let result = await this.$API.spu.reqSpuList(page, limit, category3Id);
        this.total = result.data.total;
        this.list = result.data.records;
      } catch (error) {}
    },
    //分页器的pageSize发生变化的时候会触发
    handleSizeChange(limit) {
      //修改参数
      this.limit = limit;
      this.getSpuList();
    },
    //添加SPU按钮的回调
    addSpu() {
      this.scene = 1;
      //添加SPU
      this.$refs.spu.initData(this.category3Id);
    },
    //修改某一个类的按钮的回调
    updateSpu(row) {
      this.scene = 1;
      //在父组件内部,获取子组件,子组件属性+方法都可以获取到
      this.$refs.spu.getSpuInfoList(row);
    },
    //自定义事件的回调，修改场景
    changeScene({ scene, flag }) {
      //父组件切换场景
      this.scene = scene;
      //保存按钮点击过后，父组件需要再次发请求
      //如果是修改：留在当前页
      //如果添加：留在第一个
      if (flag == "add") {
        this.getSpuList();
      } else if (flag == "update") {
        this.getSpuList(this.page);
      }
    },
    //添加SKU按钮的回调
    addSku(row) {
      //切换场景为2
      this.scene = 2;
      //在父组件内部调用子组件的方法
      //儿子需要发三个请求：请求需要参数一级分类id、二级分类id、三级分类的id、当前类的id
      const { category1Id, category2Id } = this;

      this.$refs.sku.initData(category1Id, category2Id, row);
    },
    //点击查看sku列表的按钮的回调
    async searchSkuList(row){
      //对话框显示
      this.dialogTableVisible = true;
      //点击按钮的时候需要发请求，获取相应的实例的数据进行展示
     try{
        let result =  await this.$API.spu.reqSkuList(row.id);
        this.skuList = result.data;
        this.loading =false;
     }catch(error){

     }
    },
    //对话框关闭
    close(){
      //把loading再变为true
      this.loading = true;
      //把数据清除
      this.skuList = [];
    },
    //删除spu
    async deleteSpu(row){
       try{
          await this.$API.spu.reqDeleteSpu(row.id);
          this.getSpuList(this.page);
       }catch(error){

       }
    }
  },
  components: {
    skuForm,
    spuForm,
  },
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
}
</style>
